﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PresentationLayer.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Welcome to Event.NET</title>
    <style type="text/css">
        body 
        {
            font-family: Sans-Serif;
            font-size: small;
            background-color: #eeeeee;
        }
        #Logo 
        {
            position: relative;
            z-index:200;
        }
        .slideHeader
        {
	        cursor:pointer;
	        
            position: relative;
            text-align: center;
            margin-top: 10px;
            background-color: #FF9900;
            z-index: 300;
            color: #ffffff;
            font-size: 15px;
            font-weight: bold;
            text-transform: uppercase;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .slideContainer
        {
	        visibility: hidden;
	        height:1px; 
	        overflow:hidden;
	        display:none;
	        background-color: #FF9900;
        }
        .slideContent
        {
            padding: 1px;
	        position:relative;
        }
        #Main 
        {
            margin-left: auto;
            margin-right: auto;
            margin-top: 40px;
            padding: 0px;
            width: 495px;
        }
        #slideHeader_Register 
        {
            width: 302px;
            float: left;
            border-right: 2px solid #dddddd;
        }
        #slideHeader_Login 
        {
            width: 191px;
            float: right;
        }
        #slideContainer_Register
        {
            width: 302px;
            float: left;
            border-right: 2px solid #dddddd;
        }
        #slideContainer_Login
        {
            width: 191px;
            float: right;
        }
        .Form 
        {
            margin: 10px 5px 10px 5px;
        }
        .RegisterButton 
        {
            width: 100px;
            height: 30px;
            background-image: url('VisualDesign/ActionButtons/button_register_up.png');
            background-color: transparent;
            border: 0;
        }
        .RegisterButton:hover 
        {
            background-image: url('VisualDesign/ActionButtons/button_register_over.png');
        }
        .LoginButton 
        {
            width: 100px;
            height: 30px;
            background-image: url('VisualDesign/ActionButtons/button_login_up.png');
            background-color: transparent;
            border: 0;
        }
        .LoginButton:hover 
        {
            background-image: url('VisualDesign/ActionButtons/button_login_over.png');
        }
        .ResetButton 
        {
            width: 30px;
            height: 30px;
            background-image: url('VisualDesign/ActionButtons/button_reset_up.png');
            background-color: transparent;
            border: 0;
        }
        .ResetButton:hover 
        {
            background-image: url('VisualDesign/ActionButtons/button_reset_over.png');
        }
        .ButtonCell
        {
            text-align: right;
        }
        .TextInputRegister 
        {
            width: 140px;
        }
        .TextInputLogin
        {
            width: 165px;
        }
    </style>
    <script src="javascript/Sliding.js" type="text/javascript" language="javascript">  </script>
    <script type="text/javascript" language="javascript">
        Img3 = new Image();
        Img3.src = "VisualDesign/login_register_logo.png";

        Img6 = new Image();
        Img6.src = "VisualDesign/ActionButtons/button_login_over.png";

        Img7 = new Image();
        Img7.src = "VisualDesign/ActionButtons/button_login_up.png";

        Img8 = new Image();
        Img8.src = "VisualDesign/ActionButtons/button_register_over.png";

        Img9 = new Image();
        Img9.src = "VisualDesign/ActionButtons/button_register_up.png";

        Img10 = new Image();
        Img10.src = "VisualDesign/ActionButtons/button_reset_over.png";

        Img11 = new Image();
        Img11.src = "VisualDesign/ActionButtons/button_reset_up.png";
    </script>
</head>
<body>
    <div id="Main">
        <div id="Logo"><img src="VisualDesign/login_register_logo.png" alt="EventNET" /></div>
        <div id="slideHeader_Register" class="slideHeader" onclick="showHideContent(this.id);">Register</div>
        <div id="slideHeader_Login" class="slideHeader" onclick="showHideContent(this.id);">Login</div>
        <div id="slideContainer_Register" class="slideContainer">
            <div id="slideContent_Register" class="slideContent">
                <div id="RegisterForm" class="Form">                    
                    <form id="form1" runat="server">
                    <table>
                        <tr>
                            <td>Username: </td>
                            <td><asp:TextBox runat="server" ID="username" class="TextInputRegister" TextMode="SingleLine"></asp:TextBox></td>
                            <td>
                                <asp:RequiredFieldValidator ID="requiredUsername" runat="server" Display="Dynamic"
                                    ControlToValidate="username"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='Please insert a username.' />">
                                </asp:RequiredFieldValidator>
                                <asp:RegularExpressionValidator ID="regexUsername" runat="server" Display="Dynamic"
                                    ControlToValidate="username"
                                    ValidationExpression="^\s*[A-Za-z]+[A-Za-z0-9]*\s*$"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='Username must start with a letter and can only contain letters and numbers.' />">
                                </asp:RegularExpressionValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>Password: </td>
                            <td><asp:TextBox runat="server" ID="password" class="TextInputRegister" TextMode="Password"></asp:TextBox></td>
                            <td>
                                <asp:RequiredFieldValidator ID="requiredPassword" runat="server" Display="Dynamic"
                                    ControlToValidate="password"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='Please insert a password.' />">
                                </asp:RequiredFieldValidator>
                                <asp:RegularExpressionValidator ID="regexPassword" runat="server" Display="Dynamic"
                                    ControlToValidate="password"
                                    ValidationExpression="^[A-Za-z0-9]{8,}$"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='Password must be at least 8 characters and can only contain letters and numbers.' />">
                                </asp:RegularExpressionValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>Confirm password: </td>
                            <td><asp:TextBox runat="server" ID="pconfirm" class="TextInputRegister" TextMode="Password"></asp:TextBox></td>
                            <td>
                                <asp:RequiredFieldValidator ID="requiredPasswordConfirmation" runat="server" Display="Dynamic"
                                    ControlToValidate="pconfirm"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='Please confirm your password.' />">
                                </asp:RequiredFieldValidator>
                                <asp:CompareValidator ID="comparePassword" runat="server" Display="Dynamic"
                                    ControlToValidate="pconfirm"
                                    ControlToCompare="password"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='Passwords do not match.' />">
                                </asp:CompareValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>First name: </td>
                            <td><asp:TextBox runat="server" ID="firstname" class="TextInputRegister" TextMode="SingleLine"></asp:TextBox></td>
                            <td>
                                <asp:RequiredFieldValidator ID="requiredFirstname" runat="server" Display="Dynamic"
                                    ControlToValidate="firstname"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='Please insert your first name.' />">
                                </asp:RequiredFieldValidator>
                                <asp:RegularExpressionValidator ID="regexFirstname" runat="server" Display="Dynamic"
                                    ControlToValidate="firstname"
                                    ValidationExpression="^\s*([A-Za-z]|\s)+[A-Za-z]+\s*$"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='First name can only contain letters and white spaces.' />">
                                </asp:RegularExpressionValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>Last name: </td>
                            <td><asp:TextBox runat="server" ID="lastname" class="TextInputRegister" TextMode="SingleLine" validation="lettersOnly" onblur="validate(this);"></asp:TextBox></td>
                            <td>
                                <asp:RequiredFieldValidator ID="requiredLastname" runat="server" Display="Dynamic"
                                    ControlToValidate="lastname"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='Please insert your last name.' />">
                                </asp:RequiredFieldValidator>
                                <asp:RegularExpressionValidator ID="regexLastname" runat="server" Display="Dynamic"
                                    ControlToValidate="lastname"
                                    ValidationExpression="^\s*([A-Za-z]|\s)+[A-Za-z]+\s*$"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='Last name can only contain letters and white spaces.' />">
                                </asp:RegularExpressionValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>E-Mail: </td>
                            <td><asp:TextBox runat="server" ID="email" class="TextInputRegister" TextMode="SingleLine" validation="email" onblur="validate(this);"></asp:TextBox></td>
                            <td>
                                <asp:RequiredFieldValidator ID="requiredEmail" runat="server" Display="Dynamic"
                                    ControlToValidate="email"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='Please insert your e-mail address.' />">
                                </asp:RequiredFieldValidator>
                                <asp:RegularExpressionValidator ID="regexEmail" runat="server" Display="Dynamic"
                                    ControlToValidate="email"
                                    ValidationExpression="^\s*[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\s*$"
                                    Text="<img src='gfx/redCheck.png' alt='*' title='The e-mail address is not valid.' />">
                                </asp:RegularExpressionValidator>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">&nbsp;</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="ButtonCell">
                                <asp:Button runat="server" ID="Register" Text="" onclick="Create" class="RegisterButton" />
                                <input type="reset" value="" class="ResetButton" />
                            </td>
                            <td></td>
                        </tr>
                    </table>
                    </form>
                </div>
            </div>
        </div>
        <div id="slideContainer_Login" class="slideContainer">
            <div id="slideContent_Login" class="slideContent">
                <div id="LoginForm" class="Form">
                    <form method="post" action="Default.aspx" name="LoginForm">
                        <table>
                            <tr>
                                <td>Username:</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><input name="username_login" class="TextInputLogin" type="text" /></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>Password: </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><input name="password_login" class="TextInputLogin" type="password" /></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="3">&nbsp;</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="ButtonCell">
                                    <input type="submit" value="" class="LoginButton" />
                                    <input type="reset" value="" class="ResetButton" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="debugMessage" runat="server"></div>
</body>
</html>